<template>
  <!-- 企业详情 -->
  <view class="businessDetails">
    <view class="bgColor"></view>
    <view class="wrapper" :class="companyStatus == 3 || companyStatus == 2 ? 'wrapHeight' : ''">
      <view class="blueTitle">
        <view class="wrapper-bar" style="height: auto">
          <view class="wrapper-bartitle">
            <image :src="baseImgUrl + 'qi-icon.png'" mode=""></image>
            {{ detail.companyInfo.companyName }}

            <text class="textState" :class="
                companyStatus == 1
                  ? 'stat1'
                  : companyStatus == 2
                  ? 'stat3'
                  : companyStatus == 3
                  ? 'stat2'
                  : 'stat4'
              ">
              {{
                companyStatus == 1
                  ? "审核中"
                  : companyStatus == 2
                  ? "已通过"
                  : companyStatus == 3
                  ? "已拒绝"
                  : "退出纳管"
              }}
            </text>
          </view>
        </view>
      </view>

      <view class="wrapper-item wrapper-zero">
        <view class="wrapper-facility">
          <view class="facility-item">
            <view class="textAlign label">开业时间：</view>
            <view class="value valueName">
              {{ moment(detail.companyInfo.openingTime).format('YYYY/MM/DD') }}
            </view>
          </view>
          <view class="facility-item">
            <view class="textAlign label">所属行业:</view>
            <view class="value valueName">
              {{ detail.informationInfo.informationName }}
            </view>
          </view>
          <!-- <view class="facility-item">
            <viewx class="textAlign label" style="min-width: 240rpx">
              统一社会信用代码：
            </viewx>
            <view class="value valueName">
              {{ detail.companyInfo.creditCode }}
            </view>
          </view> 
          <view class="facility-item">
            <view class="textAlign label">营业执照：</view>
            <view
              class="look value valueName"
              @click="pvwImage([businessLicenseUrl])"
            >
              {{ detail.idCard || "查看" }}
            </view>
          </view>-->
          <view class="facility-item">
            <view class="textAlign label">标准地址：</view>
            <view class="value valueName">
              {{ detail.companyInfo.standardAddress || '' }}
            </view>
          </view>
          <!-- <view class="facility-item">
            <view class="textAlign label">详细地址：</view>
            <view class="value valueName">
              {{ detail.companyInfo.addressDetail }}
            </view>
          </view> -->

          <view class="facility-item">
            <view class="textAlign label">场所照片：</view>
            <view class="value valueName ccie-details"
              :data-url="`/selfInfo/revampPlaceInfo/placeBasic?orFlag=3&id=${detail.companyInfo.id}`"
              @click="handleClickRouter">
              查看
            </view>
          </view>
        </view>
      </view>

      <view class="wrapper-item">
        <view class="wrapper-bar">
          <view class="wrapper-bartitle">资质信息</view>
        </view>

        <view style="padding-top: 20rpx"><u-line></u-line></view>
        <view class="wrapper-body">
          <view class="item-info">
            <view class="textAlign lt"> 营业执照</view>
            <view class="sign"> ：</view>
            <view class="rt ccie">
              <view :class="detail.companyInfo.businessStatus ? 'ccie-details' : ''" :data-url="
                  detail.companyInfo.businessStatus
                    ? `/selfInfo/tradeLicense/charterLicense?id=${detail.companyInfo.id}&businessStatus=${detail.companyInfo.businessStatus}&companyStatus=${companyStatus}`
                    : ''
                " @click="handleClickRouter">
                <!-- 这里为查看详情就是已完善 -->
                {{ detail.companyInfo.businessStatus ? "查看详情" : "未完善" }}
              </view>

              <view class="toPerfect"
                :data-url="`/selfInfo/tradeLicense/charterLicense?id=${detail.companyInfo.id}&businessStatus=${detail.companyInfo.businessStatus}&companyStatus=${companyStatus}`"
                @click="handleClickRouter" v-if="
                  companyStatus != 3 &&
                  !detail.companyInfo.businessStatus &&
                  companyStatus != 4
                ">
                去完善>
              </view>
            </view>
          </view>
          <view class="item-info">
            <view class="textAlign lt">企业名称</view>
            <view class="sign"> ：</view>
            <view class="rt">{{ detail.companyInfo.businessName  || '无' }}</view>
          </view>
          <view class="item-info">
            <view class="textAlign lt">统一社会信用代码</view>
            <view class="sign"> ：</view>
            <view class="rt">{{ detail.companyInfo.creditCode  || '无' }}</view>
          </view>

          <!-- <view
            class="item-info"
            v-if="detail.informationInfo.informationName == '旅馆业'"
          >
            <view class="textAlign lt"> 特行证书</view>
            <view class="sign"> ：</view>
            <view class="rt ccie">
              <view
                :class="
                  detail.companyInfo.certificateStatus ? 'ccie-details' : ''
                "
                :data-url="
                  detail.companyInfo.certificateStatus
                    ? `/selfInfo/tradeLicense/tradeLicense?id=${detail.companyInfo.id}&certificateStatus=${detail.companyInfo.certificateStatus}&companyStatus=${companyStatus}`
                    : ''
                "
                @click="handleClickRouter"
              >
                {{
                  detail.companyInfo.certificateStatus ? "查看详情" : "未完善"
                }}
              </view>

              <view
                class="toPerfect"
                :data-url="`/selfInfo/tradeLicense/tradeLicense?id=${detail.companyInfo.id}&certificateStatus=${detail.companyInfo.certificateStatus}&companyStatus=${companyStatus}`"
                @click="handleClickRouter"
                v-if="
                  companyStatus != 3 &&
                  !detail.companyInfo.certificateStatus &&
                  companyStatus != 4
                "
              >
                去完善>
              </view>
            </view>
          </view> -->
        </view>
      </view>

      <view class="wrapper-item">
        <view class="wrapper-bar">
          <view class="wrapper-bartitle"> 法人/经营者信息 </view>
        </view>

        <view style="padding-top: 20rpx"><u-line></u-line></view>
        <view class="wrapper-body">
          <view class="item-info">
            <view class="textAlign lt"> 姓名</view>
            <view class="sign"> ：</view>
            <view class="rt">{{ detail.legalInfo.legalPersonName }}</view>
          </view>
          <view class="item-info">
            <view class="textAlign lt">民族</view>
            <view class="sign"> ：</view>
            <view class="rt">{{ detail.legalInfo.nationName }}</view>
          </view>

          <view class="item-info">
            <view class="textAlign lt"> 联系方式</view>
            <view class="sign"> ：</view>
            <view class="rt">
              {{ detail.legalInfo.mobile }}
            </view>
          </view>

          <view class="item-info">
            <view class="textAlign lt"> 证件照片</view>
            <view class="sign"> ：</view>
            <view class="rt rtBlue" @click="
                pvwImage([
                  personImage ? personImage : baseImgUrl + 'queryFace-01.png',
                ])
              ">
              查看
            </view>
          </view>

          <view class="item-info">
            <view class="textAlign lt">身份证号</view>
            <view class="sign"> ：</view>
            <view class="rt">
              {{ encryptIDCard(detail.legalInfo.idCard) }}
            </view>
          </view>

          <!-- <view class="item-info">
            <view class="textAlign lt"> 户籍地址</view>
            <view class="sign"> ：</view>
            <view class="rt">
              {{ detail.legalInfo.residenceDetail }}
            </view>
          </view>

          <view class="item-info">
            <view class="textAlign lt" style="width: auto;flex-shrink: 0;">户籍地所属区县</view>
            <view class="sign"> ：</view>
            <view class="rt">
              {{ detail.legalInfo.residenceCodeName }}
            </view>
          </view> -->
        </view>
      </view>

      <view class="wrapper-item">
        <view class="wrapper-bar">
          <view class="wrapper-bartitle"> 负责人信息 </view>
        </view>

        <view class="wrapper-body">
          <view class="item-info">
            <view class="textAlign lt"> 姓名</view>
            <view class="sign"> ：</view>
            <view class="rt">{{ detail.dutyPersonInfo.dutyPersonName }}</view>
          </view>
          <view class="item-info">
            <view class="textAlign lt">民族</view>
            <view class="sign"> ：</view>
            <view class="rt">{{ detail.dutyPersonInfo.nationName }}</view>
          </view>
          <view class="item-info">
            <view class="textAlign lt"> 联系方式</view>
            <view class="sign"> ：</view>
            <view class="rt">
              {{ detail.dutyPersonInfo.mobile || "" }}
            </view>
          </view>
          <view class="item-info">
            <view class="textAlign lt"> 证件照片</view>
            <view class="sign"> ：</view>
            <view class="rt rtBlue" @click="
                pvwImage([
                  detail.dutyPersonInfo.personImage
                    ? imgPrefix + detail.dutyPersonInfo.personImage
                    : baseImgUrl + 'queryFace-01.png',
                ])
              ">
              查看
            </view>
          </view>
          <view class="item-info">
            <view class="textAlign lt"> 身份证号</view>
            <view class="sign"> ：</view>
            <view class="rt">
              {{ encryptIDCard(detail.dutyPersonInfo.idCard) || "" }}
            </view>
          </view>
          <!-- <view class="item-info">
            <view class="textAlign lt"> 户籍地址</view>
            <view class="sign"> ：</view>
            <view class="rt">
              {{ detail.dutyPersonInfo.residenceDetail || "" }}
            </view>
          </view>
          <view class="item-info">
            <view class="textAlign lt" style="width: auto;flex-shrink: 0;">户籍地所属区县</view>
            <view class="sign"> ：</view>
            <view class="rt">
              {{ detail.dutyPersonInfo.residenceCodeName || "" }}
            </view>
          </view> -->
        </view>
      </view>

      <view class="wrapper-item" v-if="companyStatus == 2 || companyStatus == 4">
        <view class="wrapper-bar">
          <view class="wrapper-bartitle">
            {{ detail.sysPoliceAgencyInfo.policeAgencyName }}
          </view>
        </view>

        <view style="padding-top: 20rpx"><u-line></u-line></view>
        <view class="wrapper-body">
          <view class="text-picture">
            <view class="lt">
              <view class="wrapper-facility">
                <view class="facility-item">
                  <view class="textAlign label">所属辖区：</view>
                  <view class="value valueName">
                    {{ detail.sysPoliceAgencyInfo.jurisdictionName || "无" }}
                  </view>
                </view>
                <view class="facility-item">
                  <view class="textAlign label">责任民警：</view>
                  <view class="value valueName">
                    {{ detail.sysPoliceAgencyInfo.userName || "暂未分配" }}
                  </view>
                </view>
                <view class="facility-item">
                  <view class="textAlign label">民警警号：</view>
                  <view class="value valueName">
                    {{ detail.sysPoliceAgencyInfo.policeUserNo || "无" }}
                  </view>
                </view>
                <view class="facility-item">
                  <view class="textAlign label">联系方式：</view>
                  <view class="value valueName">
                    {{ detail.sysPoliceAgencyInfo.mobile || "无" }}
                  </view>
                </view>
              </view>
            </view>
            <view class="rt">
              <image :src="userImage ? userImage : baseImgUrl + 'queryFace-01.png'" mode="" @click="
                  pvwImage([
                    userImage ? userImage : baseImgUrl + 'queryFace-01.png',
                  ])
                "></image>
            </view>
          </view>
        </view>
      </view>
      <view class="wrapper-item">
        <view class="wrapper-bar">
          <view class="wrapper-bartitle"> 采集信息 </view>
        </view>
        <view class="wrapper-body">
          <view class="item-info">
            <view class="lt"> 采集时间： </view>
            <view class="rt">{{ detail.companyInfo.createTime }}</view>
          </view>
          <view class="item-info">
            <view class="lt"> 采集人员： </view>
            <view class="rt">{{ detail.companyInfo.collectionName || "" }}</view>
          </view>
          <view class="item-info">
            <view class="lt"> 人员类型： </view>
            <view class="rt">{{ detail.companyInfo.collectionType || "" }}</view>
          </view>
        </view>
      </view>
      <!-- <view class="wrapper-item" v-if="companyStatus != 4">
        <view class="wrapper-bar">
          <view class="wrapper-bartitle"> 审核信息 </view>
        </view>

        <view class="wrapper-body">
          <view class="item-info">
            <view class="lt"> 提交时间： </view>
            <view class="rt">{{ detail.companyInfo.createTime }}</view>
          </view>
          <view class="item-info">
            <view class="lt"> 审核民警： </view>
            <view class="rt">{{ detail.auditInfo.auditUserName || "" }}</view>
          </view>

          <view class="item-info">
            <view class="lt"> 审核状态： </view>
            <view class="rt" :class="
                companyStatus == 1
                  ? 'stat1'
                  : companyStatus == 3
                  ? 'stat2'
                  : 'stat3'
              ">{{
                companyStatus == 1
                  ? "待审核"
                  : companyStatus == 3
                  ? "已拒绝"
                  : "已通过"
              }}</view>
          </view>

          <block v-if="companyStatus == 3">
            <view class="item-info">
              <view class="lt"> 拒绝时间： </view>
              <view class="rt">{{ detail.auditInfo.auditTime || "" }}</view>
            </view>
            <view class="item-info">
              <view class="lt"> 拒绝理由： </view>
              <view class="rt">{{ detail.auditInfo.auditMemo || "" }}</view>
            </view>
          </block>

          <view class="item-info" v-if="companyStatus == 2">
            <view class="lt"> 通过时间： </view>
            <view class="rt">{{ detail.auditInfo.auditTime || "" }}</view>
          </view>
        </view>
      </view> -->

      <view class="wrapper-item" v-if="companyStatus == 4">
        <view class="wrapper-bar">
          <view class="wrapper-bartitle"> 退出管理详情 </view>
        </view>

        <view class="wrapper-body">
          <view class="item-info">
            <view class="lt"> 退出时间： </view>
            <view class="rt">{{ detail.auditInfo.auditTime }}</view>
          </view>
          <view class="item-info">
            <view class="lt"> 操作民警： </view>
            <view class="rt">{{ detail.auditInfo.auditUserName || "" }}</view>
          </view>
          <view class="item-info">
            <view class="lt"> 退出原因： </view>
            <view class="rt">{{ detail.auditInfo.auditMemo || "" }}</view>
          </view>
        </view>
      </view>
    </view>

    <view class="btns" v-if="visibleModifyBtn">
      <!-- 区分是重要提醒过来的还是从企业过来的，如果是企业过来的，则可以删除和修改 -->
      <block>
        <button class="reset-btn lt graybtn" type="primary"
          :data-url="`/selfInfo/deleteBusiness/deleteBusiness?id=${options.id}&backIndex=2`" @click="handleClickRouter">
          删除场所
        </button>
        <button class="submit-btn lookbtn" type="primary" :data-url="`/selfInfo/myBusiness/addBusiness?data=${encodeURIComponent(
            JSON.stringify({ ...detail.companyInfo, backIndex: 2 })
          )}`" @click="handleClickRouter">
          修改并重新提交
        </button>
      </block>
    </view>
    <view class="btns" v-if="companyStatus == 2">
      <block>
        <button class="submit-btn lookbtn" style="width: 100%" type="primary" :data-url="`/selfInfo/amendBusiness/revampSiteInfo?data=${encodeURIComponent(
            JSON.stringify({ id: detail.companyInfo.id })
          )}`" @click="handleClickRouter">
          修改注册信息
        </button>
      </block>
    </view>
  </view>
</template>

<script>
  import {
    companyChangeDetail,
    messageDetail
  } from "@/api/myself.js";
  import {
    handleClickRouter,
    pvwImage,
    hiddenInfo,
    encryptIDCard
  } from "@/utils/util.js";

  import moment from '@/utils/moment.js'

  export default {
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        detail: {},
        options: {},
        imgPrefix: uni.getStorageSync("imgPrefix"),
        businessLicenseUrl: "", //营业执照
        personImage: "", // 法人照片
        userImage: "", // 民警照片
        companyStatus: "", //状态   1.审核中 2.审核通过 3.审核失败 4.退出纳管
        pageConfig: {
          pageNo: 1,
          pageSize: 100,
          total: 0,
        },
      };
    },
    onLoad(options) {
      this.options = options;
      this.getList(options.id);
    },
    computed: {
      visibleModifyBtn() {
        // 如果是企业页面过来的 或者默认的  source 有 enterprise importantReminder
        // 西安按照状态分类
        if (this.companyStatus == 3) {
          if (['enterprise'].includes(this.options.source)) {
            return true
          } else {
            // 重要提醒过来的，则只展示未修改的
            return this.options.isCompanyType == '0'
          }
        }
      }
    },
    methods: {
      encryptIDCard,
      handleClickRouter,
      pvwImage,
      hiddenInfo,
      moment,
      getList(id) {
        if (this.options.homeon) {
          companyChangeDetail({
            changeId: id
          }).then((res) => {
            if (res.code == 200) {
              this.companyStatus = res.result.auditInfo.companyStatus;
              this.detail = res.result;
              this.detail.legalInfo.mobile = hiddenInfo(
                this.detail.legalInfo.mobile,
                3,
                4
              );
              this.detail.legalInfo.idCard = hiddenInfo(
                this.detail.legalInfo.idCard,
                6,
                4
              );
              this.detail.dutyPersonInfo.mobile = hiddenInfo(
                this.detail.dutyPersonInfo.mobile,
                3,
                4
              );
              this.detail.dutyPersonInfo.idCard = hiddenInfo(
                this.detail.dutyPersonInfo.idCard,
                6,
                4
              );

              this.businessLicenseUrl = res.result.companyInfo.businessLicenseUrl ?
                this.imgPrefix + res.result.companyInfo.businessLicenseUrl :
                "";
              this.personImage = res.result.legalInfo.personImage ?
                this.imgPrefix + res.result.legalInfo.personImage :
                "";
              this.userImage = res.result.sysPoliceAgencyInfo.userImage ?
                this.imgPrefix + res.result.sysPoliceAgencyInfo.userImage :
                "";
            }
          });
          return false;
        }

        messageDetail({
          companyId: id
        }).then((res) => {
          if (res.code == 200) {
            this.companyStatus = res.result.auditInfo.companyStatus;
            this.detail = res.result;
            this.detail.legalInfo.mobile = hiddenInfo(
              this.detail.legalInfo.mobile,
              3,
              4
            );
            this.detail.legalInfo.idCard = hiddenInfo(
              this.detail.legalInfo.idCard,
              6,
              4
            );
            this.detail.dutyPersonInfo.mobile = hiddenInfo(
              this.detail.dutyPersonInfo.mobile,
              3,
              4
            );
            this.detail.dutyPersonInfo.idCard = hiddenInfo(
              this.detail.dutyPersonInfo.idCard,
              6,
              4
            );

            this.businessLicenseUrl = res.result.companyInfo.businessLicenseUrl ?
              this.imgPrefix + res.result.companyInfo.businessLicenseUrl :
              "";
            this.personImage = res.result.legalInfo.personImage ?
              this.imgPrefix + res.result.legalInfo.personImage :
              "";
            this.userImage = res.result.sysPoliceAgencyInfo.userImage ?
              this.imgPrefix + res.result.sysPoliceAgencyInfo.userImage :
              "";
          }
        });
      },
    },
  };
</script>

<style>
  page {
    background-color: #f3f3f3 !important;
    height: 100%;
  }
</style>
<style lang="scss" scoped>
  .businessDetails {
    flex: 1;
    background-color: #f3f3f3;
    margin-bottom: 50px;

    .textAlign {
      flex-shrink: 0;
    }

    .bgColor {
      width: 100%;
      height: 240rpx;
      background: #2488f5;
    }

    .businessDetails-title {
      position: absolute;
      top: 10rpx;
      left: 6%;
      color: #ffffff;
      font-size: 34rpx;
      font-weight: bold;
    }

    .wrapper {
      position: absolute;
      top: 30rpx;
      left: 50%;
      transform: translateX(-50%);
      margin-bottom: 50px;

      .blueTitle {
        padding: 20rpx 40rpx;
        border-radius: 10rpx 10rpx 0 0;
        background: #ecf9ff;
      }

      .wrapper-item {
        margin-bottom: 1vh;
        padding: 35rpx 40rpx;
        background-color: #ffffff;
        box-shadow: 0px 3px 6px 1px rgba(123, 123, 123, 0.2);
        border-radius: 10rpx;
        width: 702rpx;

        .wrapper-body {
          padding-top: 20px;
        }

        .text-picture {
          display: flex;

          .lt {
            width: 425rpx;
            max-width: 425rpx;

            .name {
              font-size: 30rpx;
              font-family: PingFang SC;
              font-weight: bold;
              margin-bottom: 17rpx;
              margin-top: 20rpx;
            }
          }

          .rt {
            width: 200rpx;
            height: 220rpx;
            margin-left: 20rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }
        }

        .item-info {
          display: flex;
          margin-bottom: 25rpx;

          .lt {
            height: 34rpx;
            font-size: 26rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #7b7b7b;
            // width: 110rpx;
            min-width: 110rpx;
          }

          .sign {
            color: #7b7b7b;
          }

          .rt {
            width: calc(100% - 137rpx);
            font-size: 26rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #333;
            margin-left: 6rpx;
          }

          .rtBlue {
            color: #2488f5;
          }

          .stat1 {
            color: #ffc002;
          }

          .stat2 {
            color: #eb0101;
          }

          .stat3 {
            color: #0cad83;
          }

          .stat4 {
            color: #9d9d9d;
          }
        }
      }

      .wrapper-bar {
        display: flex;
        justify-content: space-between;
        height: 40rpx;

        .wrapper-bartitle {
          font-size: 30rpx;
          font-weight: bold;

          text {
            display: inline-block;
            margin-left: 8px;
            color: #ababab;
            font-size: 28rpx;
          }

          image {
            margin-bottom: -3rpx;
            margin-right: 10rpx;
            width: 36rpx;
            height: 36rpx;
          }

          .textState {
            padding: 5rpx 12rpx;
            color: #ffffff;
            font-weight: 500;
            font-size: 24rpx;
            border-radius: 8rpx;
          }

          .stat1 {
            background: #ffc002;
          }

          .stat2 {
            background: #eb0101;
          }

          .stat3 {
            background: #0cad83;
          }

          .stat4 {
            color: #9d9d9d;
            background: #dedede;
          }
        }
      }

      .wrapper-zero {
        border-radius: 0 0 10rpx 10rpx;
      }
    }

    .wrapHeight {
      height: calc(100vh - 86px);
      overflow-y: auto;
    }

    .ccie {
      flex: 1;
      display: flex;
      justify-content: space-between;
    }

    .ccie-details {
      color: #2488f5;
    }

    .toPerfect {
      padding: 3rpx 10rpx;
      border-radius: 8rpx;
      color: #ffffff;
      background: #2488f5;
    }

    .btns {
      position: absolute;
      bottom: 0;
      width: 100%;
    }
  }
</style>